<template>
  <div>
    <van-nav-bar title="聊天" fixed safe-area-inset-top placeholder>
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <div class="user-wrap">
      <div v-for="(item,index) in userList" :key="index" style="border-bottom: 1px solid #dcdde1;" @click="toChatPage(item.uid)">
        <van-swipe-cell >
          <div style="height: 46px; background-color: #ffffff; display: flex; flex-wrap: nowrap; padding: 10px;">
            <div style="width: 46px;">
              <van-badge :content="item.num > 0 ? item.num : ''">
                <van-image
                  radius="5"
                  width="46"
                  height="46"
                  :src="item.avatar"
                />
              </van-badge>
            </div>
            <div style="margin-left: 10px;">
              <div>
                <span style="font-size: 15px; color: #303133;">{{ item.uid }}</span>
              </div>
              <div style="font-size: 14px; width: calc(100vw - 76px); color: #909399; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
                {{ item.data.msg }}
              </div>
              <div style="text-align: right; margin-bottom: 5px;">
                <span style="font-size: 11px; color: #C0C4CC;">{{ item.data.date }}</span>
              </div>
            </div>
          </div>
          <template #right>
            <van-button square text="删除" type="danger" class="delete-button" @click="deleteUser(item.uid)"/>
          </template>
        </van-swipe-cell>
      </div>
    </div>
  </div>
</template>

<script setup>
import { storeToRefs } from 'pinia'
import { userListStore } from '@/stores/mqttStore'
import { useRouter } from 'vue-router'

const { userList } = storeToRefs(userListStore())
const router = useRouter()

const deleteUser = (uid) => {
  userList.value = userList.value.filter(i => i.uid != uid)
}

const toChatPage = (uid) => {
  router.push({
    path: 'chat',
    query: {uid: uid}
  })
}
</script>

<style lang="less" scoped>
.user-wrap{
  height: calc(100vh - 96px);
  width: 100vw;
  background-color: #f5f6f9;
  overflow: auto;
  padding-top: 5px;
  padding-bottom: 5px;

  .delete-button {
    height: 100%;
  }
}
</style>